<%@ page pageEncoding="UTF-8"%>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="isperp" uri="/WEB-INF/tlds/isperp.tld"%>


<style>
.form-table td {
	vertical-align: top;
	border: 1px solid #E9EDF1;
}

#sortable td {
	padding: 20px;
}

.screen {
	height: 30px;
	background: #bcbcbc;
	color: #ff66cc;
	font-size: 18px;
}

.fixed-buttom {
	width: 100%;
	height: 10px;
	position: relative;
	background-color: #fff
}

.ui-menu {
	height: 33px;
	position: relative;
	width: 160px
}

.stylePanel {
	float: left;
	padding: 20px;
}
</style>
<form action="app/menu/webosSetting/save">
	<div class="box tabbedBox">
		<div class="header">
			<ul>
				<li class="current"><a href="#desktop">桌面图标</a>
				</li>
				<li><a href="#customStyle">主题设置</a>
				</li>
			</ul>
			<h2>&nbsp;</h2>
		</div>
		<div style="padding:0" class="content tabbed">
			<div id="desktop">
				<table class="form-table box no-border"
					style="table-layout: fixed;width:90%;margin:0 auto">
					<tbody>
						<tr>
							<td>
								<div class="header">
									<h3 style="text-align: center;">屏幕：1</h3>
								</div></td>
							<td>
								<div class="header">
									<h3 style="text-align: center;">屏幕：2</h3>
								</div></td>
							<td>
								<div class="header">
									<h3 style="text-align: center;">屏幕：3</h3>
								</div></td>
						</tr>
						<tr id="sortable">
							<td class='wrapper' data-indexnum="1"><c:forEach
									items="${screen1 }" var="item">
									<div class="ui-menu">
										<img alt="" src="${item.icon_image}" width="30" height="30">
										${item.name } <input type="hidden" name="menuIds"
											value="${item.id }"> <input type="hidden"
											name="indexNums" class="indexNums" value="1">
									</div>
								</c:forEach>

								<div class="fixed-buttom"></div>
							</td>
							<td class='wrapper' data-indexnum="2"><c:forEach
									items="${screen2 }" var="item">
									<div class="ui-menu">
										<img alt="" src="${item.icon_image}" width="30" height="30">
										${item.name } <input type="hidden" name="menuIds"
											value="${item.id }"> <input type="hidden"
											name="indexNums" class="indexNums" value="2">
									</div>
								</c:forEach>

								<div class=" fixed-buttom"></div>
							</td>
							<td class='wrapper' data-indexnum="3"><c:forEach
									items="${screen3 }" var="item">
									<div class="ui-menu">
										<img alt="" src="${item.icon_image}" width="30" height="30">
										${item.name } <input type="hidden" name="menuIds"
											value="${item.id }"> <input type="hidden"
											name="indexNums" class="indexNums" value="3">
									</div>
								</c:forEach>
								<div class=" fixed-buttom"></div></td>
						</tr>
				</table>


				<isperp:operate code="APP_MENU_WEBOS_SETTING"></isperp:operate>
			</div>
			<div id="customStyle"></div>
		</div>
	</div>
</form>
<script>
	$("#sortable").sortable({
		items : 'div',
		dropOnEmpty : true,
		connectWith : ".wrapper",
		start : function(event, ui) {
			$(".fixed-buttom").css("border", "1px dashed #ddd");
		},
		stop : function() {
			$(".fixed-buttom").css("border", "none");
		},
		update : function(event, ui) {

			$(ui.item).find(".indexNums").val($(ui.item).parent().data("indexnum"));

		}
	}).disableSelection();

	var template = "<div class='stylePanel'><div class='divImage' data-keyv='{key}'  style='width:250px;height:250px; background:{background}'></div><p><input type='radio' id='key_{key}' name='styleKey' value='{key}'>{name}</p></div>";

	var keys = [ "sail", "green", "cloud", "grass", "wood", "texture", "aliceblue", "midAutumn", "dandelionDream" ];

	var divPanelHtml = "";

	$(keys).each(function(index, key) {
		divPanelHtml += template.replace(new RegExp("{key}", "gm"), key).replace('{background}', isperp.appConfig.style[key].background).replace('{name}', isperp.appConfig.style[key].name);
	});

	$(customStyle).html(divPanelHtml);

	$(".divImage").click(function() {

		$("#key_" + $(this).data("keyv")).attr("checked", true);
	});
</script>
<isperp:buttonList>
	<button class="submit"
		onclick="isperp.submitForm({success : function() {isperp.closeDialog(); }});return false;">
		<span class="icon icon-save"></span>提交
	</button>
</isperp:buttonList>